<script setup>
import { ref } from 'vue'
import Close from '@/assets/svg/Close.vue'
const props = defineProps({
  title: {
    type: String,
    default: '',
  },
})
const isVisible = ref(false)
const open = () => {
  isVisible.value = true
}
const close = () => {
  isVisible.value = false
}
defineExpose({ open, close })
</script>
<template>
  <a-modal
    width="70%"
    v-model:open="isVisible"
    :footer="null"
    :closable="false"
    :maskClosable="false"
    :destroyOnClose="true"
    :keyboard="false"
  >
    <div class="border-[10px] border-[#ccc] relative">
      <div class="p-5 flex justify-between items-center absolute top-0 left-0 right-0 z-1">
        <div></div>
        <div class="text-3xl">{{ title }}</div>
        <Close color="#ccc" class="cursor-pointer" @click="close" />
      </div>
      <slot></slot>
    </div>
  </a-modal>
</template>
<style lang="scss" scoped>
:global(.ant-modal .ant-modal-content) {
  border-radius: 0 !important;
  padding: 0 !important;
}
:global(.ant-modal) {
  max-width: 800px !important;
}
@media (max-width: 800px) {
  :global(.ant-modal) {
    width: 90% !important;
    max-width: none;
  }
}
</style>
